<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //数组的解构赋值
        //ES5
        // let a=1;let b=2;let c=3;
        //Es6
        // let [e,f,g]=[1,2,3];

        //基本用法
        // let[x,y]=[1,2];
        // console.log(x,y);   //1,2

        //剩余运算符
        // let a,b,rest;
        // [a,b,...rest]=[1,2,3,4,5,6];
        // console.log(a,b,rest);  //rest[3,4,5,6]

        //可忽略
        // let [a,,b]=[1,2,3];
        // console.log(a,b);

        //不完全解构
        // let[a,b]=[1];
        // console.log(a,b);

        //解构默认值
        // let[a,b=2]=[1];
        // console.log(a,b);

        //对字符串进行解构赋值
        // let [a,b,c,d,e]="hello";
        // console.log(a,b,c,d,e);

        //解构赋值交换两个变量的值
        var a=10;
        var b=20;
        console.log(a,b);
        [a,b]=[b,a];
        console.log(a,b);

        //对象的解构赋值
        //用法1
        // let{age,name}={name:'mike',age:20};
        // console.log(name,age);
        //用法2
        let width=600;
        let height=800;
        let depth;
        console.log(width,height);

        let size={
            width:200,
            height:300
        };
        //代码块语句不允许出现在赋值语句左侧，所以要加小括号变成表达式
        ({width,height}=size);
        console.log(width,height);
        //对象中不存在与变量同名的属性
        ({width,height,depth}=size);
        console.log(width,height,depth);
        //给结构的变量设置默认值
        ({width,height,depth=400}=size);
        console.log(width,height,depth);
        //对象属性赋值给不同变量
        let personName,name,age;
        ({name:personName,age}={name:"tom",age:20});
        console.log(personName,name,age);

        //数值和布尔的解构赋值
        // let {toString:s}=123;
        // console.log(s===Number.prototype.toString); //true

        let{toString:b}=true;
        console.log(b===Boolean.prototype.toString);    //true

        //函数参数的解构赋值
        function add([x,y]){
            return x+y;
        }
        let result=add([1,2]);
        console.log(result);        //3

        //函数参数解构赋值使用默认值
        function move({x=0,y=0}={}){
            return [x,y];
        }
        console.log(move({x:3,y:8}));   //[3,8]
        console.log(move({x:3}));       //[3,0]
        console.log(move({}));          //[0,0]
        console.log(move());            //[0,0]
    </script>
</body>
</html>